<template>
  <div class="profile-page">
    <div class="profile-container">
      <!-- 个人信息头部 -->
      <div class="profile-header">
        <div class="header-card">
          <div class="avatar-section">
            <div class="avatar-wrapper">
              <el-avatar :size="80" :src="userInfo?.avatar" class="user-avatar">
                <el-icon :size="32">
                  <User/>
                </el-icon>
              </el-avatar>
              <el-button
                  circle
                  class="avatar-edit-btn"
                  size="small"
                  type="primary"
                  @click="showAvatarDialog = true"
              >
                <el-icon>
                  <Edit/>
                </el-icon>
              </el-button>
            </div>
          </div>
          <div class="user-info-section">
            <h2 class="user-name">{{ userInfo?.nickname || userInfo?.username || '用户' }}</h2>
            <p class="user-subtitle">{{ userInfo?.email || '欢迎来到 Easy Mart' }}</p>
            <div class="user-meta">
              <span class="meta-item">
                <el-icon><Calendar/></el-icon>
                注册于 {{ formatDate(userInfo?.createTime) || '--' }}
              </span>
            </div>
          </div>
          <div class="header-actions">
            <el-button type="primary" @click="showEditDialog = true">
              <el-icon>
                <Edit/>
              </el-icon>
              编辑资料
            </el-button>
          </div>
        </div>
      </div>

      <!-- 功能卡片区域 -->
      <div class="profile-content">
        <!-- 个人信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <h3>个人信息</h3>
            <el-button size="small" type="primary" @click="showEditDialog = true">
              <el-icon>
                <Edit/>
              </el-icon>
              编辑
            </el-button>
          </div>
          <div class="card-content">
            <div class="info-grid">
              <div class="info-item">
                <div class="info-icon">
                  <el-icon>
                    <User/>
                  </el-icon>
                </div>
                <div class="info-content">
                  <span class="info-label">用户名</span>
                  <span class="info-value">{{ userInfo?.username || '未设置' }}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="info-icon">
                  <el-icon>
                    <Message/>
                  </el-icon>
                </div>
                <div class="info-content">
                  <span class="info-label">邮箱</span>
                  <span class="info-value">{{ userInfo?.email || '未设置' }}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="info-icon">
                  <el-icon>
                    <Phone/>
                  </el-icon>
                </div>
                <div class="info-content">
                  <span class="info-label">手机号</span>
                  <span class="info-value">{{ userInfo?.phone || '未设置' }}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="info-icon">
                  <el-icon>
                    <Male/>
                  </el-icon>
                </div>
                <div class="info-content">
                  <span class="info-label">性别</span>
                  <span class="info-value">{{ getGenderText(userInfo?.gender) }}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="info-icon">
                  <el-icon>
                    <Calendar/>
                  </el-icon>
                </div>
                <div class="info-content">
                  <span class="info-label">生日</span>
                  <span class="info-value">{{ formatDate(userInfo?.birthday) || '未设置' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 快捷操作卡片 -->
        <div class="quick-actions-card">
          <div class="card-header">
            <h3>快捷操作</h3>
          </div>
          <div class="card-content">
            <div class="action-grid">
              <div class="action-item" @click="router.push('/orders')">
                <div class="action-icon">
                  <el-icon>
                    <Document/>
                  </el-icon>
                </div>
                <span class="action-label">我的订单</span>
              </div>
              <div class="action-item" @click="activeTab = 'addresses'">
                <div class="action-icon">
                  <el-icon>
                    <Location/>
                  </el-icon>
                </div>
                <span class="action-label">收货地址</span>
              </div>
              <div class="action-item" @click="showPasswordDialog = true">
                <div class="action-icon">
                  <el-icon>
                    <Lock/>
                  </el-icon>
                </div>
                <span class="action-label">修改密码</span>
              </div>
              <div class="action-item" @click="handleLogout">
                <div class="action-icon">
                  <el-icon>
                    <SwitchButton/>
                  </el-icon>
                </div>
                <span class="action-label">退出登录</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 地址管理卡片 -->
        <div v-if="activeTab === 'addresses'" class="address-card">
          <div class="card-header">
            <h3>收货地址</h3>
            <el-button size="small" type="primary" @click="showAddressDialog = true">
              <el-icon>
                <Plus/>
              </el-icon>
              添加地址
            </el-button>
          </div>
          <div class="card-content">
            <div v-loading="addressLoading" class="addresses-list">
              <div
                  v-for="address in addresses"
                  :key="address.id"
                  :class="{ default: address.isDefault }"
                  class="address-item"
              >
                <div class="address-info">
                  <div class="address-header">
                    <span class="receiver-name">{{ address.receiverName }}</span>
                    <span class="receiver-phone">{{ address.receiverPhone }}</span>
                    <el-tag v-if="address.isDefault" size="small" type="success">默认</el-tag>
                  </div>
                  <div class="address-detail">
                    {{ address.province }} {{ address.city }} {{ address.district }} {{ address.detailAddress }}
                  </div>
                </div>
                <div class="address-actions">
                  <el-button type="text" @click="editAddress(address)">编辑</el-button>
                  <el-button
                      class="delete-btn"
                      type="text"
                      @click="deleteAddress(address.id)"
                  >
                    删除
                  </el-button>
                </div>
              </div>

              <div v-if="addresses.length === 0" class="empty-addresses">
                <el-empty description="暂无收货地址">
                  <el-button type="primary" @click="showAddressDialog = true">添加地址</el-button>
                </el-empty>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑资料对话框 -->
    <el-dialog v-model="showEditDialog" title="编辑资料" width="500px">
      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="80px">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="editForm.nickname" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="editForm.gender">
            <el-radio :label="0">未知</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
              v-model="editForm.birthday"
              format="YYYY-MM-DD"
              placeholder="请选择生日"
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button :loading="updating" type="primary" @click="updateProfile">保存</el-button>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="showPasswordDialog" title="修改密码" width="500px">
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="80px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
              v-model="passwordForm.oldPassword"
              placeholder="请输入原密码"
              show-password
              type="password"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
              v-model="passwordForm.newPassword"
              placeholder="请输入新密码"
              show-password
              type="password"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
              v-model="passwordForm.confirmPassword"
              placeholder="请再次输入新密码"
              show-password
              type="password"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPasswordDialog = false">取消</el-button>
        <el-button :loading="changingPassword" type="primary" @click="changePassword">确定</el-button>
      </template>
    </el-dialog>

    <!-- 头像上传对话框 -->
    <el-dialog v-model="showAvatarDialog" title="更换头像" width="500px">
      <div class="avatar-upload">
        <el-upload
            :auto-upload="false"
            :before-upload="beforeAvatarUpload"
            :on-change="handleAvatarChange"
            :show-file-list="false"
            accept="image/jpeg,image/png"
            class="avatar-uploader"
        >
          <el-avatar v-if="newAvatar" :size="120" :src="newAvatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
        <div class="upload-tip">
          <p>支持 JPG、PNG 格式，文件大小不超过 2MB</p>
        </div>
      </div>
      <template #footer>
        <el-button @click="cancelAvatarUpload">取消</el-button>
        <el-button :disabled="!newAvatar" :loading="uploadingAvatar" type="primary" @click="updateAvatar">保存
        </el-button>
      </template>
    </el-dialog>

    <!-- 地址编辑对话框 -->
    <el-dialog v-model="showAddressDialog" :title="editingAddress ? '编辑地址' : '添加地址'" width="600px">
      <el-form ref="addressFormRef" :model="addressForm" :rules="addressRules" label-width="80px">
        <el-form-item label="收货人" prop="receiverName">
          <el-input v-model="addressForm.receiverName" placeholder="请输入收货人姓名"/>
        </el-form-item>
        <el-form-item label="手机号" prop="receiverPhone">
          <el-input v-model="addressForm.receiverPhone" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="省市区" prop="region">
          <AddressSelector v-model="addressForm.region"/>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input
              v-model="addressForm.detailAddress"
              :rows="3"
              placeholder="请输入详细地址"
              type="textarea"
          />
        </el-form-item>
        <el-form-item label="邮政编码" prop="postalCode">
          <el-input v-model="addressForm.postalCode" placeholder="请输入邮政编码（可选）"/>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddressDialog = false">取消</el-button>
        <el-button :loading="savingAddress" type="primary" @click="saveAddress">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import {
  Calendar,
  Document,
  Edit,
  Location,
  Lock,
  Message,
  Phone,
  Plus,
  SwitchButton,
  User
} from '@element-plus/icons-vue'
import AddressSelector from '@/components/AddressSelector.vue'
import {changePassword as changePasswordApi, getCurrentUser, updateUserProfile} from '@/api/user'
import {createAddress, deleteAddress as deleteAddressApi, getUserAddresses, updateAddress} from '@/api/address'
import {useUserStore} from '@/store'
import {formatDate} from '@/utils'

// 路由相关
const router = useRouter()

// 状态管理
const userStore = useUserStore()

// 响应式数据
const activeTab = ref('')
const userInfo = ref(null)
const addresses = ref([])
const addressLoading = ref(false)


// 对话框显示状态
const showEditDialog = ref(false)
const showPasswordDialog = ref(false)
const showAvatarDialog = ref(false)
const showAddressDialog = ref(false)

// 加载状态
const updating = ref(false)
const changingPassword = ref(false)
const uploadingAvatar = ref(false)
const savingAddress = ref(false)

// 编辑资料表单
const editForm = reactive({
  nickname: '',
  email: '',
  phone: '',
  gender: 0,
  birthday: ''
})

const editRules = {
  nickname: [
    {required: true, message: '请输入昵称', trigger: 'blur'}
  ],
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
  ]
}

// 修改密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordRules = {
  oldPassword: [
    {required: true, message: '请输入原密码', trigger: 'blur'}
  ],
  newPassword: [
    {required: true, message: '请输入新密码', trigger: 'blur'},
    {min: 6, message: '密码长度不能少于6位', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: '请再次输入新密码', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 头像上传
const newAvatar = ref('')
const avatarFile = ref(null)

// 地址表单
const editingAddress = ref(null)
const addressForm = reactive({
  receiverName: '',
  receiverPhone: '',
  region: '',
  detailAddress: '',
  postalCode: '',
  isDefault: false
})

const addressRules = {
  receiverName: [
    {required: true, message: '请输入收货人姓名', trigger: 'blur'}
  ],
  receiverPhone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
  ],
  region: [
    {required: true, message: '请选择省市区', trigger: 'change'}
  ],
  detailAddress: [
    {required: true, message: '请输入详细地址', trigger: 'blur'}
  ]
}

// 表单引用
const editFormRef = ref()
const passwordFormRef = ref()
const addressFormRef = ref()

// 获取用户信息
const fetchUserProfile = async () => {
  try {
    const response = await getCurrentUser()
    userInfo.value = response.data

    // 填充编辑表单
    Object.assign(editForm, {
      nickname: response.data.nickname || '',
      email: response.data.email || '',
      phone: response.data.phone || '',
      gender: response.data.gender || 0,
      birthday: response.data.birthday || ''
    })
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 更新用户资料
const updateProfile = async () => {
  try {
    await editFormRef.value.validate()
    updating.value = true

    await updateUserProfile(editForm)

    ElMessage.success('资料更新成功')
    showEditDialog.value = false
    await fetchUserProfile()
    await userStore.fetchUserInfo()
  } catch (error) {
    if (error !== false) {
      console.error('更新资料失败:', error)
      ElMessage.error('更新资料失败')
    }
  } finally {
    updating.value = false
  }
}

// 修改密码
const changePassword = async () => {
  try {
    await passwordFormRef.value.validate()
    changingPassword.value = true

    await changePasswordApi({
      oldPassword: passwordForm.oldPassword,
      newPassword: passwordForm.newPassword
    })

    ElMessage.success('密码修改成功')
    showPasswordDialog.value = false

    // 重置表单
    Object.assign(passwordForm, {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
  } catch (error) {
    if (error !== false) {
      console.error('修改密码失败:', error)
      ElMessage.error('修改密码失败')
    }
  } finally {
    changingPassword.value = false
  }
}

// 头像上传前验证
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('头像只能是 JPG 或 PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB!')
    return false
  }
  return true
}

// 头像文件选择
const handleAvatarChange = (file) => {
  if (!beforeAvatarUpload(file.raw)) {
    return
  }

  avatarFile.value = file.raw

  // 预览图片
  const reader = new FileReader()
  reader.onload = (e) => {
    newAvatar.value = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

// 取消头像上传
const cancelAvatarUpload = () => {
  showAvatarDialog.value = false
  newAvatar.value = ''
  avatarFile.value = null
}

// 更新头像
const updateAvatar = async () => {
  if (!newAvatar.value) {
    ElMessage.warning('请先选择头像')
    return
  }

  try {
    uploadingAvatar.value = true

    // 使用updateUserProfile接口，传递Base64数据
    await updateUserProfile({
      avatar: newAvatar.value
    })

    ElMessage.success('头像更新成功')
    showAvatarDialog.value = false
    newAvatar.value = ''
    avatarFile.value = null

    await fetchUserProfile()
    await userStore.fetchUserInfo()
  } catch (error) {
    console.error('更新头像失败:', error)
    ElMessage.error('更新头像失败')
  } finally {
    uploadingAvatar.value = false
  }
}

// 获取地址列表
const fetchAddresses = async () => {
  try {
    addressLoading.value = true
    const response = await getUserAddresses()
    addresses.value = response.data
  } catch (error) {
    console.error('获取地址列表失败:', error)
    ElMessage.error('获取地址列表失败')
  } finally {
    addressLoading.value = false
  }
}

// 编辑地址
const editAddress = (address) => {
  editingAddress.value = address
  Object.assign(addressForm, {
    receiverName: address.receiverName,
    receiverPhone: address.receiverPhone,
    region: `${address.province} ${address.city} ${address.district}`,
    detailAddress: address.detailAddress,
    postalCode: address.postalCode || '',
    isDefault: address.isDefault === 1
  })
  showAddressDialog.value = true
}

// 保存地址
const saveAddress = async () => {
  try {
    await addressFormRef.value.validate()
    savingAddress.value = true

    // 解析省市区
    const [province, city, district] = addressForm.region.split(' ')

    const addressData = {
      receiverName: addressForm.receiverName,
      receiverPhone: addressForm.receiverPhone,
      province: province || '',
      city: city || '',
      district: district || '',
      detailAddress: addressForm.detailAddress,
      isDefault: addressForm.isDefault
    }

    if (editingAddress.value) {
      await updateAddress(editingAddress.value.id, addressData)
      ElMessage.success('地址更新成功')
    } else {
      await createAddress(addressData)
      ElMessage.success('地址添加成功')
    }

    showAddressDialog.value = false
    resetAddressForm()
    await fetchAddresses()
  } catch (error) {
    if (error !== false) {
      console.error('保存地址失败:', error)
      ElMessage.error('保存地址失败')
    }
  } finally {
    savingAddress.value = false
  }
}

// 删除地址
const deleteAddress = async (addressId) => {
  try {
    await ElMessageBox.confirm('确定要删除这个地址吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await deleteAddressApi(addressId)
    ElMessage.success('地址删除成功')
    await fetchAddresses()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除地址失败:', error)
      ElMessage.error('删除地址失败')
    }
  }
}

// 重置地址表单
const resetAddressForm = () => {
  editingAddress.value = null
  Object.assign(addressForm, {
    receiverName: '',
    receiverPhone: '',
    province: '',
    city: '',
    district: '',
    detailAddress: '',
    postalCode: '',
    isDefault: false
  })
}

// 性别文本转换
const getGenderText = (gender) => {
  switch (gender) {
    case 1:
      return '男'
    case 2:
      return '女'
    default:
      return '未设置'
  }
}

// 退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    userStore.logout()
    ElMessage.success('退出登录成功')
    router.push('/login')
  } catch (error) {
    // 用户取消操作
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchUserProfile()
  fetchAddresses()
})
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background: var(--bg-secondary);
  padding: 2rem 0;
}

.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 个人信息头部 */
.profile-header {
  margin-bottom: 2rem;
}

.header-card {
  background: var(--bg-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  border: 1px solid var(--border-light);
}

.avatar-section {
  position: relative;
  flex-shrink: 0;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.user-avatar {
  border: 3px solid var(--primary-100);
  box-shadow: var(--shadow-md);
}

.avatar-edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  box-shadow: var(--shadow-sm);
}

.user-info-section {
  flex: 1;
}

.user-name {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.user-subtitle {
  font-size: 1rem;
  color: var(--text-tertiary);
  margin: 0 0 1rem 0;
}

.user-meta {
  display: flex;
  gap: 1rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.meta-item .el-icon {
  color: var(--primary-color);
}

.header-actions {
  flex-shrink: 0;
}

/* 内容区域 */
.profile-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* 通用卡片样式 */
.info-card,
.quick-actions-card,
.address-card {
  background: var(--bg-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
}

.info-card:hover,
.quick-actions-card:hover,
.address-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
  border-color: var(--primary-200);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.card-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.card-content {
  padding: 1.5rem;
}

/* 个人信息网格 */
.info-grid {
  display: grid;
  gap: 1rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
}

.info-item:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
}

.info-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-label {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-value {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* 快捷操作网格 */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
  text-decoration: none;
}

.action-item:hover {
  background: var(--primary-50);
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.action-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-light);
  border-radius: var(--radius-xl);
  color: white;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* 退出登录按钮特殊样式 */
.action-item:last-child .action-icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.action-item:last-child:hover {
  border-color: #ef4444;
}

.action-item:last-child:hover .action-icon {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.action-label {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
  text-align: center;
}

.user-info {
  flex: 1;
}

.user-info h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #303133;
}

.user-info p {
  margin: 5px 0;
  color: #606266;
  font-size: 14px;
}

.info-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 14px;
}

.info-item .label {
  color: #909399;
  min-width: 80px;
  font-weight: 500;
}

.info-item .value {
  color: #303133;
  flex: 1;
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 功能菜单 */
.menu-section {
  background: white;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item .el-icon:first-child {
  margin-right: 15px;
  color: #409eff;
}

.menu-item span {
  flex: 1;
  font-size: 16px;
  color: #303133;
}

.menu-item .arrow {
  color: #c0c4cc;
}

/* 地址管理 */
.addresses-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.section-header h3 {
  margin: 0;
  color: #303133;
}

.addresses-list {
  max-height: 500px;
  overflow-y: auto;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.address-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.address-item.default {
  border-color: #67c23a;
  background: #f0f9ff;
}

.address-info {
  flex: 1;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.receiver-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.receiver-phone {
  color: #606266;
}

.address-detail {
  color: #606266;
  line-height: 1.5;
}

.address-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.delete-btn {
  color: #f56c6c;
}

.empty-addresses {
  text-align: center;
  padding: 40px 20px;
}

/* 占位区域 */
.placeholder-section {
  background: white;
  border-radius: 8px;
  padding: 60px 20px;
  text-align: center;
}

/* 头像上传 */
.avatar-upload {
  text-align: center;
}

.avatar-uploader {
  display: inline-block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.upload-tip {
  margin-top: 15px;
}

.upload-tip p {
  margin: 0;
  color: #909399;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-page {
    padding: 10px;
  }

  .user-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .user-actions {
    flex-direction: row;
    justify-content: center;
  }

  .menu-item {
    padding: 15px;
  }

  .addresses-section {
    padding: 15px;
  }

  .address-item {
    flex-direction: column;
    gap: 15px;
  }

  .address-actions {
    flex-direction: row;
    align-self: stretch;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .user-card {
    padding: 15px;
  }

  .user-actions {
    flex-direction: column;
    width: 100%;
  }

  .section-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .address-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

/* 新设计的响应式样式 */
@media (max-width: 1024px) {
  .profile-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .header-content {
    padding: 0 20px;
  }

  .user-stats {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .profile-container {
    padding: 0 15px;
  }

  .header-background {
    height: 150px;
  }

  .header-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 0 15px;
    bottom: -80px;
  }

  .user-name {
    font-size: 24px;
  }

  .user-subtitle {
    font-size: 14px;
  }

  .user-stats {
    justify-content: center;
    gap: 15px;
  }

  .stat-number {
    font-size: 18px;
  }

  .profile-content {
    padding-top: 100px;
    gap: 15px;
  }

  .card-header {
    padding: 15px 20px;
  }

  .card-header h3 {
    font-size: 16px;
  }

  .card-content {
    padding: 20px;
  }

  .action-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .action-item {
    padding: 16px;
  }

  .action-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .action-label {
    font-size: 13px;
  }

  .info-item {
    padding: 12px;
  }

  .info-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .profile-container {
    padding: 0 10px;
  }

  .header-content {
    padding: 0 10px;
  }

  .user-name {
    font-size: 20px;
  }

  .user-stats {
    gap: 10px;
  }

  .stat-number {
    font-size: 16px;
  }

  .stat-label {
    font-size: 11px;
  }

  .card-header {
    padding: 12px 15px;
  }

  .card-content {
    padding: 15px;
  }

  .action-grid {
    gap: 10px;
  }

  .action-item {
    padding: 12px;
  }

  .action-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .action-label {
    font-size: 12px;
  }

  .info-item {
    padding: 10px;
    gap: 12px;
  }

  .info-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .info-label {
    font-size: 11px;
  }

  .info-value {
    font-size: 13px;
  }
}
</style>
